<template>
    <div class="card-list-component">
        <div v-if="prodList.length >= 1">
            <div class="card-list-box"
                 :class="{'vux-1px-b': (index + 1) !== prodList.length}"
                 v-for="(item,index) in prodList"
                 :key="index"
                 @click="productJump(item)">
                <div class="card-img">
                    <img :src="item.content[0]" :alt="item.content[1]">
                </div>
                <div class="card-info">
                    <div class="card-title">{{ item.content[1] }}</div>
                    <div class="card-description">{{ item.content[2] }}</div>
                    <div class="card-lines">申请人数：<span>{{item.applyNumber}}</span></div>
                </div>
            </div>
        </div>
        <div class="nothing" v-if="showNone">
            <img src="../assets/img/nothing.png" alt="这里什么都没有哦">
            <p>暂时没有数据~</p>
        </div>
    </div>
</template>
<script>
    /**
     * Created by 吴彦祖 on 2018/3/16.
     * 信用卡列表，用于信用卡贷款的页面
     * @params
     * @lists {Array} 用于展示的数据
     */
    export default {
        name: 'card-list',
        props:{
            showNone:{
        		type:Boolean,
                default:false
            },
            prodList: {
            	type:Array,
                default:()=>{
            		return [];
                }
            },
        },
        data(){
        	return {
            }
        },
        methods:{
            productJump (productId) {
                this.$emit('on-click-prodItem', productId);
            }
        },
        activated(){
        }
    }
</script>

<style lang="less">
    @import '../style/mixin.less';
    .card-list-component{
        background-color: @color-white;
        .nothing {
            padding-top: 50px;
            text-align: center;
            img {
                width: 120px;
                height: auto;
            }
            p {
                font-size: @font-size-small;
                line-height: 30px;
                color: @color-text-third;
            }
        }
        .card-list-box{
            .flexLayout(flex-start,center,row);
            height:95px;
            box-sizing: border-box;
            margin:0 12px;
            padding:10px 0;
            .card-img{
                width:34%;
                text-align: center;
                margin-right:12Px;
                border-radius: @border-radius-normal-size;
                img{
                    width:100%;
                    height:100%;
                    border-radius: @border-radius-normal-size;
                }
            }
            .card-info{
                width:60%;
                box-sizing: border-box;
                margin-right: 10px;
                .card-title{
                    font-size:@font-size-medium;
                    margin-bottom:5px;
                }
                .card-description{
                    width:100%;
                    font-size:@font-size-small;
                    color: @color-text-third;
                    .ellipsis(100%);

                }
                .card-lines{
                    font-size:@font-size-small;
                    color: @color-text-third;
                    .ellipsis(217px);
                    span{
                        color: @color-text-placeholder-red;
                    }
                }
            }
        }
    }
</style>
